<%@ page contentType="text/html; charset=utf-8" pageEncoding="big5"%>
<%@page language="java" import="util.*, java.sql.*, beans.*" %>
<html>
<head>
<title>Payment Page</title>
<link href="astyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
        @import url(calendar-blue2.css);
    </style>
<script type="text/javascript" src="calendar.js"></script>
<script type="text/javascript" src="calendar-en.js"></script>
<script type="text/javascript" src="calendar-setup.js"></script>
<SCRIPT LANGUAGE="JavaScript">            
        function doCheck(){
        if (document.payment.holdername.value==""){
        alert("Cardholder name can not be empty!");
        return false;
        }
        if (document.payment.number.value==""){
        alert("Cardnumber can not be empty!");
        return false;
        }
        if (document.payment.number.value.length < 16){
        alert("Invalid Cardnumber!");
        return false;
        }
        if (document.payment.bank.value==""){
        alert("Bank can not be empty!");
        return false;
        }
        if (document.payment.date.value==""){
        alert("Expiry date can not be empty!");
        return false;
        }
        if (document.payment.company.value==""){
        alert("Company must be entered!");
        return false;
        }
        }//end do check
    </script>
<SCRIPT LANGUAGE="JavaScript">
        function isDigit(s)
        {
        var patrn=/^[0-9]{1,20}$/;
        if (!patrn.exec(s) && s!=""){
        alert("Cardnumber must be in digit!");
        s="";
        return false;
        }
        }//end isDigit
    </script>
</head>
<body>
<div class="absolute_title">Captain Hook's Store</div>
<div class="absolute_title2">
  <h5>
    <%
        String username = (String)session.getAttribute("username");
        
        if(username==null) {
           response.sendRedirect("NotLoginPage.jsp");
           return;
        }else {
        %>
    <h5>Hi!<%= username%><br/>
      <a href="logout.jsp"> Click here to logout</a></h5>
  </h5>
</div>
<%
    MemberBean member = MemberBean.getMemberInfo(username);
    String address = member.getAddress();
%>
<div class="wrap">
  <div class="canvas">
    <div class="left_column">
      <div class="header_left">
        <div class="header_leftrowone">&nbsp;</div>
        <div class="header_leftrowtwo"><img src="../image/cpt_hook_banner1.jpg" width="123" height="87" /></div>
        <div class="header_leftrowthree"></div>
      </div>
      <div class="leftnav">
        <ul>
          <li></li>
        </ul>
      </div>
      <div>
        <SCRIPT src="displayMyFlash1.js"></SCRIPT>
      </div>
    </div>
    <div class="right_column">
      <div class="header_right">
        <div class="header_rightrowone">&nbsp;</div>
        <div class="header_rightrowtwo">&nbsp;</div>
        <div class="header_rightrowthree">
          <ul class="topmenu">
            <li><a title="Home" 
                               href="index.jsp">Home</a> | </li>
            <li><a title="Information" 
                               href="companybackground.html">Information</a> |
            <li><a title="Forum" 
                               href="http://www.voy.com/206926/">Discussion Forum</a></li>
          </ul>
        </div>
      </div>
      <div class="content_wrapper">
        <div class="content_left">
          <div>
            <center>
              <h2>Choose Payment Method</h2>
            </center>
            <% 
                        String total = "0.0";
                        total = request.getParameter("totalAmount");
                        String exchangeSign = request.getParameter("exchangeSign");
                        %>
            <h5>Your total amount = <%=exchangeSign + " " +total%></h5>
            <form name="payment" action="PaymentServlet" method="post" onSubmit="return doCheck();">
              <p>
              <h4>Pay by Credit Card:</h4>
              <br>
              <table border="0">
                <tr>
                  <td>Cardholder name:</td>
                  <td><input type = 'text' name = 'holdername'></td>
                </tr>
				<tr>
                  <td>Delivery Address:</td>
                  <td colspan="2"><textarea name="address" cols="40" rows="3"><%=address %></textarea></td>
                </tr>
                <tr>
                  <td>Card Type:</td>
                  <td><select NAME="company">
                      <option value ="visa" selected>Visa</option>
                      <option value ="master">Master</option>
                      <option value ="jcb">JCB</option>
                      <option value ="aa">American Express</option>
                    </select></td>
                </tr>
                <tr>
                  <td>Card No.:</td>
                  <td><input type = 'text' name = 'number' maxlength="16" onBlur="isDigit(this.value)"></td>
                </tr>
                <tr>
                  <td>Issue Bank:</td>
                  <td><input type = 'text' name = 'bank'></td>
                </tr>
                <tr>
                  <td>Expiry Date:</td>
                  <td><input type = 'text' id='issueDate' name = 'issueDate' readonly />
                    <input type="button" id='trigger' value='select' /></td>
                </tr>
              </table>
              <script type="text/javascript">
  			Calendar.setup(
    			{
    			  inputField  : "issueDate",         // ID of the input field
     			  ifFormat    : "%d/%m/%Y",    // the date format
			  button      : "trigger"       // ID of the button
    		 	}
 				 );
				 </script>
              <input type='hidden' name='amount' value='<%=total%>' />
              <input type='hidden' name='currency' value='<%=exchangeSign%>' />
              <br>
              <input name='Submit' type='Submit' value='Proceed' />
              <input name='Reset' type='Reset' value='Reset' />
            </form>
            <% }
                        %>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            </center>
          </div>
          <div class="post_btm"> </div>
        </div>
      </div>
      <div class="footer">
        <ul class="basemenu">
          <li></li>
        </ul>
        Designed by Captain Hook inc, all rights reserved. <br />
      </div>
    </div>
  </div>
</div>
</body>
</html>
